<template>

  <j-modal
    :title="title"
    :width="400"
    :visible="visible"
    :maskClosable="false"
    switchFullscreen
    @ok="handleOk"
    :okButtonProps="{ class:{'jee-hidden': disableSubmit} }"
    @cancel="handleCancel">
      <!-- 主表单区域 -->
      <a-form-model ref="form" :model="model">
        <a-row>
          <a-col :span="24" >
            <a-form-model-item label="姓名" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="name">
              <j-user-select v-model="model.userId"/>
            </a-form-model-item>
          </a-col>

        </a-row>
        <a-row>
          <a-col :span="24">
            <a-list item-layout="horizontal" :data-source="fileList">
              <a-list-item slot="renderItem" slot-scope="item, index">
                <a @click.prevent="downFile(item)">{{item['fileName']}}</a>
              </a-list-item>
            </a-list>
          </a-col>
        </a-row>
      </a-form-model>
  </j-modal>

</template>
<script>

  import JUserSelect from '@comp/jeecg/JUserSelect'
  import { getAction } from '@api/manage'

  export default {
    name: 'VcaFileTemplateDownloadModal',
    components: {
      JUserSelect,
    },
    data() {
      return {
        model:{},
        title:'',
        fileList:[],
        width:400,
        visible: false,
        disableSubmit: false,
        formDisabled:false,
        labelCol: {
          xs: { span: 24 },
          sm: { span: 5 },
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 16 },
        },
        url:{
          downloadFile:"/villageCadreAssist/vcaFileTemplate/downloadFile",
          downloadAllFile:"/villageCadreAssist/vcaFileTemplate/downloadAllFile",
          queryVcaFileItemListByMainId:"/villageCadreAssist/vcaFileTemplate/queryVcaFileItemByMainId"
        }
      }
    },
    methods:{
      edit (record) {
        this.visible=true;
        this.fileList.splice(0,this.fileList.length)
        this.model = Object.assign({}, record);
        getAction(this.url.queryVcaFileItemListByMainId,{id:this.model["id"]}).then( res => {
          if(res.success){
            if(res.result){
              res.result.forEach(item=>{
                this.fileList.push(item);
              });
            }
          }else{
            that.$message.warning(res.message);
          }
        });
      },
      downFile(fileInfo){//下载单文件
        getAction(this.url.downloadFile,{url:fileInfo["fileUrl"],residentId:this.model.userId},{responseType: "blob"}).then( data => {
          console.log("data",data);
          const blob = new Blob([data]); // 把得到的结果用流对象转一下
          var a = document.createElement("a"); //创建一个<a></a>标签
          a.href = URL.createObjectURL(blob); // 将流文件写入a标签的href属性值
          a.download = fileInfo["fileName"]; //设置文件名
          a.style.display = "none"; // 障眼法藏起来a标签
          document.body.appendChild(a); // 将a标签追加到文档对象中
          a.click(); // 模拟点击了a标签，会触发a标签的href的读取，浏览器就会自动下载了
          a.remove(); // 一次性的，用完就删除a标签
          /* docx.renderAsync(data, this.$refs.file); // 渲染到页面*/
        });
      },
      close () {
        this.$emit('close');
        this.visible = false;
      },
      handleOk () {
        console.log('model',this.model);
        console.log('fileList',this.fileList);
        getAction(this.url.downloadAllFile,{templateId:this.model["id"],residentId:this.model.userId},{responseType: "blob"}).then( data => {
          const blob = new Blob([data]); // 把得到的结果用流对象转一下
          var a = document.createElement("a"); //创建一个<a></a>标签
          a.href = URL.createObjectURL(blob); // 将流文件写入a标签的href属性值
          if(this.fileList.length==1){
            a.download = this.fileList[0]["fileName"];
          }else{
            a.download = this.model["name"]+".zip";
          }
          a.style.display = "none"; // 障眼法藏起来a标签
          document.body.appendChild(a); // 将a标签追加到文档对象中
          a.click(); // 模拟点击了a标签，会触发a标签的href的读取，浏览器就会自动下载了
          a.remove(); // 一次性的，用完就删除a标签
          /* docx.renderAsync(data, this.$refs.file); // 渲染到页面*/
        });
      },
      submitCallback(){
        this.$emit('ok');
        this.visible = false;
      },
      handleCancel () {
        this.close()
      }
    }
  }
</script>

<style scoped>
</style>